<template>
  <div
    class="bc-query-panel"
    :style="{
      height: unpack
        ? `${Math.ceil((props.queries.length + 1) / 4) * 72.5}px`
        : `${Math.ceil((showNum + 1) / 4) * 72.5}px`,
    }"
  >
    <div v-for="(item, index) in queryList" :key="index" class="bc-query-item">
      <div class="query-item-label">{{ item.label }}</div>
      <div class="query-item-control">
        <!-- 选择器 -->
        <bc-query-select
          v-model="queryForm[item.prop]"
          :config="item"
          :form="queryForm"
          v-if="item.type === 'select'"
        />
        <!-- 选择器 -->
        <bc-query-cascader
          v-model="queryForm[item.prop]"
          :config="item"
          :form="queryForm"
          v-else-if="item.type === 'cascader'"
        />
        <!-- 时间范围选择器 -->
        <bc-query-date-picker
          v-model="queryForm[item.prop]"
          :config="item"
          v-else-if="['date', 'month', 'datetime'].includes(item.type)"
        />
        <!-- 数组 -->
        <bc-query-number v-model="queryForm[item.prop]" :config="item" v-else-if="item.type === 'number'" />
        <!-- 范围 -->
        <bc-query-input-range v-model="queryForm[item.prop]" :config="item" v-else-if="item.type === 'range'" />
        <!-- 文本 -->
        <bc-query-input v-model="queryForm[item.prop]" :config="item" v-else />
      </div>
    </div>
    <div class="query-action-box">
      <span class="retractable-box" @click="handleUnpack" v-if="props.showNum < props.queries.length">
        <el-icon :class="['retractable-icon', { unpack: unpack }]"><ArrowDown /></el-icon>
        <span class="retractable-text">{{ unpack ? '收起' : '展开' }}</span>
      </span>
      <el-button type="primary" @click="handleQuery">查询</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>
  </div>
</template>

<script setup>
import BcQueryInput from './components/BcQueryInput.vue'
import BcQueryNumber from './components/BcQueryNumber.vue'
import BcQuerySelect from './components/BcQuerySelect.vue'
import BcQueryDatePicker from './components/BcQueryDatePicker.vue'
import BcQueryInputRange from './components/BcQueryInputRange.vue'
import BcQueryCascader from './components/BcQueryCascader.vue'
import { watch } from 'vue'
const emits = defineEmits(['query', 'reset'])
const props = defineProps({
  /**
   * type: select|date|month|number|datetime|range
   * prop: form key
   * startProp: date|month|datetime|range专用，起始值key
   * endProp: date|month|datetime|range专用，结束值key
   * label: 字段名
   * options: select专用，枚举项[{value:"",label:""}]
   * attrs: 各输入框原始属性
   * format: date|month|datetime专用，时间展示格式
   */
  queries: {
    type: Array,
    default: () => [],
  },
  // 展示数量
  showNum: {
    type: Number,
    default: 3,
  },
  // 是否默认展开
  isOpen: {
    type: Boolean,
    default: false,
  },
  params: {
    type: Object,
    default: () => ({}),
  },
})

// 收放
const unpack = ref(props.isOpen) // 1 收起；2 展开
const handleUnpack = () => {
  unpack.value = !unpack.value
}

const queryList = computed(() => {
  if (unpack.value) {
    return props.queries
  } else {
    return props.queries.slice(0, props.showNum)
  }
})

// 查询
const queryForm = reactive({})
const handleQuery = () => {
  const params = { ...queryForm }
  queryList.value
    .filter((i) => ['date', 'month', 'datetime', 'range'].includes(i.type))
    .map((i) => {
      if (params[i.prop] && i.startProp && i.endProp) {
        params[i.startProp] = params[i.prop][0]
        params[i.endProp] = params[i.prop][1]
        delete params[i.prop]
      }
    })
  emits('query', params)
}
const handleReset = () => {
  const keys = Object.keys(queryForm)
  for (const key of keys) {
    queryForm[key] = null
  }
  emits('reset', {})
}
const getQueryForm = () => {
  return { ...queryForm }
}

watch(
  () => props.params,
  (val) => {
    Object.assign(queryForm, val)
    emits('query', queryForm)
  },
  { immediate: true, deep: true }
)

defineExpose({
  getQueryForm,
})
</script>

<style lang="scss" scoped>
.bc-query-panel {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #edeeef;
  margin-bottom: 12px;
  transition: height 0.3s ease;
  overflow: hidden;
  .bc-query-item {
    width: calc(25% + 3px);
    padding: 0 12px 12px 0;
    &:nth-child(4n) {
      width: calc(25% - 9px);
      padding: 0 0 12px 0;
    }
    .query-item-label {
      margin-bottom: 8px;
      line-height: 20px;
      white-space: nowrap;
      font-size: 14px;
    }
    .query-item-control {
    }
  }
  .query-action-box {
    flex: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 28px 0 12px 0;
    .retractable-box {
      cursor: pointer;
      font-size: 14px;
      margin-right: 12px;
      line-height: 32px;
      .retractable-icon {
        margin-right: 4px;
        vertical-align: middle;
        transition: transform 0.3s ease;
      }
      .retractable-text {
        vertical-align: middle;
      }
      .unpack {
        transform: rotate(-180deg);
        transition: transform 0.3s ease;
      }
    }
  }
}
</style>
